<template>
	<view class="all" style="padding-bottom: 88rpx;">
		<view class="carp carp1">
			<image src="https://s4.ax1x.com/2022/02/09/HGe8gJ.png" />
			<view class="carp_1">
				<view class="carp_1_1">
					<text>祝华风</text>
					<text>13688888888</text>
				</view>
				<view class="carp_1_2">河南省郑州市中原区桐柏路街道金成 中心四单元88楼西户</view>
			</view>
			<u-icon name="arrow-right" color='' />
		</view>
		<view class="carp carp2">
			<image src="https://s4.ax1x.com/2022/02/09/HGmUMj.png" />
			<view class="carp2_1">
				<view class="carp_2_1_1">
					<text>影响幼教的力量图书书 书书书书幼教的力量...</text>
					<view class="carp_2_1_2">
						<text>￥187.00</text>
						<text>x1</text>
					</view>
				</view>
				<text class="yanse">
					颜色：白色
				</text>

			</view>
		</view>
		<view class=" carp3">
			<text class="bianti">支付信息</text>
			<view class="carp3_1">
				<view class="carp3_1_1">
					购买数量
				</view>
				<view class="carp3_1_2">
					<text @click="jian">-</text>
					<text>{{num}}</text>
					<text @click="jia">+</text>
				</view>
			</view>
			<view class="carp3_1">
				<view class="carp3_1_1">
					商品总价
				</view>
				<view class="carp3_1_3">
					{{heji}}
				</view>
			</view>
			<view class="carp3_1">
				<view class="carp3_1_1">
					优惠券
				</view>
				<view class="carp3_1_3">
					-￥{{yh}}
				</view>
			</view>
			<view class="carp3_1">
				<view class="carp3_1_1">
					快递费
				</view>
				<view class="carp3_1_3">
					包邮
				</view>
			</view>
			<view class="carp3_1" style="padding: 10rpx 0 0rpx 0;">
				<view class="carp3_1_1">
					订单备注
				</view>
				<view style="width: 75%;">
					<u-input type="text" value="" />
				</view>

			</view>
			<view class="carpt">
				<text>需付款：</text>
				<text>￥{{heji}}</text>
			</view>
		</view>
		<view class="foot">
			<text>合计：</text>
			<text>{{heji.toFixed(2)}}</text>
			<text @click="submit">立即支付</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				danjia: 187,
				yh: 18,
				num: 1,
				type: '',
				id: '',
			};
		},
		computed: {

			heji() {
				return this.danjia * this.num - this.yh
			},
		},
		methods: {
			jian() {
				this.num--
			},
			jia() {
				this.num++
			},
			submit() {
				uni.navigateTo({
					url: `/pages/play/play?money=${this.heji}&type=${this.type}&id=${'1'}`
				})
			}
		},

	}
</script>

<style lang="scss">
	.all {
		min-height: 1300rpx;
		background-color: #F8F8FA;
		padding-top: 30rpx;
		border-radius: 16rpx;

		.foot {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 100%;
			background-color: white;
			padding-right: 30rpx;
			height: 120rpx;
			text-align: right;
			position: fixed;
			bottom: 0;

			text:nth-of-type(1) {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #131314;
				opacity: 1;
			}

			text:nth-of-type(2) {
				display: inline-block;
				margin: 0 10rpx 0 10rpx;
				font-size: 36rpx;
				font-family: HarmonyOS Sans;
				font-weight: 600;
				color: #FF2424;
				opacity: 1;
			}

			text:nth-of-type(3) {
				display: inline-block;
				width: 300rpx;
				height: 88rpx;
				background: #FFD500;
				opacity: 1;
				border-radius: 44px;
				line-height: 88rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #703F00;
				opacity: 1;
			}
		}

		.carpt {
			padding-top: 20rpx;
			text-align: right;

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #131314;
				opacity: 1;
			}

			text:nth-of-type(2) {
				font-size: 28rpx;
				font-family: HarmonyOS Sans;
				font-weight: 600;
				color: #FF2424;
				opacity: 1;
			}
		}

		.carp {
			width: 92%;
			border-radius: 16rpx;
			padding: 25rpx;
			display: flex;
			justify-content: space-between;
			background-color: white;
			margin: 0rpx auto 20rpx;
		}

		.carp3 {
			width: 92%;
			padding: 25rpx;
			background-color: white;
			margin: 0rpx auto 20rpx;

			.carp3_1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #E3E3E3;
				padding: 30rpx 0 10rpx 0;

				.carp3_1_2 {
					text:nth-of-type(1) {
						width: 50rpx;
						height: 50rpx;
						border-radius: 100%;
						display: inline-block;
						text-align: center;
						line-height: 50rpx;
						background-color: rgb(245, 245, 245);
					}

					text:nth-of-type(2) {
						font-size: 28rpx;
						font-family: HarmonyOS Sans;
						font-weight: 400;
						line-height: 0px;
						color: #131314;
						opacity: 1;
						margin: 0 20rpx 0 20rpx;

					}

					text:nth-of-type(3) {
						width: 50rpx;
						height: 50rpx;
						border-radius: 100%;
						display: inline-block;
						text-align: center;
						line-height: 50rpx;
						background-color: rgb(245, 245, 245);
					}

				}

				.carp3_1_3 {
					font-size: 30rpx;
					font-family: HarmonyOS Sans;
					font-weight: 500;
					color: #131314;
					opacity: 1;
				}

				.carp3_1_1 {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #131314;
					opacity: 1;
				}
			}

			.bianti {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #131314;
				opacity: 1;
			}
		}

		.carp2 {
			image {
				width: 186rpx;
				height: 186rpx;
			}

			.carp2_1 {
				width: 70%;

				.yanse {
					font-size: 24rpx;
					display: inline-block;
					margin-top: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #91969A;
					opacity: 1;
				}

				.carp_2_1_2 {
					text:nth-of-type(2) {
						font-size: 24rpx;
						font-family: HarmonyOS Sans;
						font-weight: 400;
						color: #91969A;
						opacity: 1;
					}

					text:nth-of-type(1) {
						font-size: 24rpx;
						font-family: HarmonyOS Sans;
						font-weight: 400;
						color: #131314;
						opacity: 1;
					}

					text {
						display: block;
						text-align: right;
					}
				}

				.carp_2_1_1 {
					display: flex;
					justify-content: space-between;

					text:nth-of-type(1) {
						display: inline-block;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #131314;
						opacity: 1;
						width: 70%;
					}
				}
			}
		}

		.carp1 {
			align-items: center;

			.carp_1 {
				width: 75%;

				.carp_1_2 {
					margin-top: 10rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #131314;
					opacity: 1;
				}

				.carp_1_1 {
					text:nth-of-type(1) {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #131314;
						opacity: 1;
					}

					text:nth-of-type(2) {
						display: inline-block;
						margin-left: 10rpx;
						font-size: 28rpx;
						font-family: HarmonyOS Sans;
						font-weight: 400;
						color: #91969A;
						opacity: 1;
					}
				}
			}

			image {
				width: 67rpx;
				height: 67rpx;
			}
		}
	}
</style>
